<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/element.css"/>
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/requestjs.js"></script>
    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="app">
    <!--查看文章详情-->
    <el-dialog title="问题详情" :visible.sync="dialogFormVisible" width="50%">
        <el-form label-width="80px" :model="details">
            <el-form-item label="作者">
                <el-input v-model="details.aUserId"></el-input>
            </el-form-item>
            <el-form-item label="提交时间">
                <el-input v-model="details.qcreateDate"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input type="textarea" :rows="5" v-model="details.qcontent"/>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button v-if="details.aState === 0" type="primary" @click="checkFunc(details)"> pass </el-button>
      <el-button v-if="details.aState === 0" type="primary" @click="checkFunc(details)">no pass </el-button>
      <el-button v-else type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </span>
    </el-dialog>


    <!--审核操作-->
    <el-dialog title="审核文章" :visible.sync="check" width="30%">
        <el-form>
            <el-form-item label="审核描述">
                <el-input v-model="checkDetail"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="check = false,checkDetail = '' ">取 消</el-button>
        <el-button type="success" @click="checkCommit(1)">pass</el-button>
        <el-button type="danger" @click="checkCommit(-2)">no pass</el-button>
      </span>
    </el-dialog>

    <el-dialog title="下架文章" :visible.sync="delMark" width="30%">
        <span>您确定下架此篇文章?</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="delMark = false">取 消</el-button>
        <el-button type="primary" @click="delzx()">确 定</el-button>
      </span>
    </el-dialog>

    <table class="layui-hide" id="demo" lay-filter="test"></table>
    <div id="page"></div>

</div>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
</script>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false,
            check: false,
            delMark: false,
            checkDetail: '',
            details: {}
        },
        methods: {
            openDetail(data) {
                this.dialogFormVisible = true;
                this.details = data;
            },
            checkFunc(data) {
                this.details = data;
                this.check = true;
            },
            checkCommit(state) {
                this.details.aCheakDescribe = this.checkDetail;
                this.details.aState = state;
                var checkTime = '';
                var myDate = new Date();
                checkTime = myDate.getFullYear() + '-' + (((myDate.getMonth() + 1) <= 9) ? '0' + (myDate.getMonth() + 1) : (myDate.getMonth() + 1)) + '' +
                    '-' + (myDate.getDate() <= 9 ? '0' + (myDate.getDate() + 1) : (myDate.getDate() + 1)) + ' '
                    + (myDate.getHours() <= 9 ? '0' + myDate.getHours() : myDate.getHours())
                    + ':' + (myDate.getMinutes() <= 9 ? '0' + myDate.getMinutes() : myDate.getMinutes())
                    + ':' + (myDate.getSeconds() <= 9 ? '0' + myDate.getSeconds() : myDate.getSeconds()) + '.0';
                this.details.aChechTime = checkTime;

                if (state == 1) {
                    methodaxios.post('http://localhost:9001/zx-app/pass', this.details, res => {
                        this.check = false;
                        this.dialogFormVisible = false;
                        layui.table.reload("demo");
                        this.checkDetail = '';
                        this.details = {}
                    })
                }
            },

            delFunc(data) {
                this.details = data;
                this.delMark = true;
            },
            delzx() {
                console.log(this.details);
                this.details.aState = -1
                methodaxios.post('http://localhost:9001/zx-app/upd', this.details, res => {
                    this.check = false;
                    this.dialogFormVisible = false;
                    this.delMark = false;
                    layui.table.reload("demo");
                })
            }
        }

    })

</script>

<script type="text/html" id="buttonTpl">
    {{#  if(d.aState == 1){ }}
    <button class="layui-btn layui-btn-xs">已审核</button>
    {{#  }else if(d.aState == -1){ }}
    <button class="layui-btn-warm layui-btn-xs">已下架</button>
    {{#  }else if(d.aState == -2){ }}
    <button class="layui-btn-danger layui-btn-xs">未通过</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>
    {{#  } }}
</script>

<!-- <blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote> -->



<script src="../lib/layui/layui.js"></script>
<script>
    layui.config({
        version: '1594038785991' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块

        //向世界问个好
        //layer.msg('Hello World');

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

      //页面第一次请求 默认 1页 10条
      function dataLists(pageNum, numPerPage) {
        $.get("http://localhost:8080/sys-q/findQ", {
          page: pageNum, // 页码数
          limit: numPerPage // 每页条数
        }, function (data) {
          console.log(data)
          //let datalist = JSON.parse(data)
          dataList(data.data) // 数据传到 table组件
          page(data.data)   // 数据传到 分页组件
        })
      }

      dataLists(1, 10)

      function page(data) {
        laypage.render({
          elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
          count: data.sum, //数据总数，从服务端得到
          limit: data.list.length, // 每页条数
          limits: [10, 20, 30, 40, 50],
          layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
          jump: function (obj, first) {
            console.log("obj-----------------------------")
            console.log(obj)
            //obj包含了当前分页的所有参数，比如：
            //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            //console.log(obj.limit); //得到每页显示的条数
            //首次不执行
            if (!first) {
              //do something
              numpage(obj.curr, obj.limit) // 分页点击传参
            }
          }
        });
      }

      // 从新写了 一个请求
      function numpage(pageNum, numPerPage) {
        $.get("http://localhost:8080/sys-q/findQ", {
          page: pageNum,
          limit: numPerPage
        }, function (data) {
          //let datalist = JSON.parse(data)
          dataList(data.data) // 传到table组件
        })
      }


      function dataList(data) {
        table.render({
          elem: '#demo',
          cols: [[ //表头
            {type: 'checkbox', fixed: 'left', width: 50}
            , {
              field: 'user.uid', title: 'ID', templet: function (data) {
                return data.user.uid;
              }, width: 60, sort: true, fixed: 'left'
            }
            , {
              field: 'user.uname', title: '作者', templet: function (data) {
                return data.user.uname;
              }, width: 100
            }
            , {field: 'qcontent', title: '内容', width: 240}
            , {field: 'qcreateDate', title: '创建时间', width: 170}
            , {field: 'qstate', title: '状态', width: 80, templet: '#buttonTpl'}
            , {field: 'checkDescribe', title: '审核描述', width: 170}
            , {field: 'qcheckTime', title: '审核时间', width: 200}
            , {fixed: 'right', width: 114, align: 'center', toolbar: '#barDemo'}
          ]],
          data: data.list, // 数据
          limit: data.sum, // 显示的条数
          //page: true, // 开启分页
        });
      }
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
            layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent == 'detail') {
                console.log("查询详情")
                app.openDetail(data);
            } else if (layEvent == 'check') {
                app.checkFunc(data);
                console.log('审核操作');
            } else if (layEvent == 'del') {
                console.log('下架操作');
            }
        });
    });


</script>
</body>
</html>
